<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>014-web字体</title>
		<style>
			/* 简单写法 */
			@font-face {
				font-family: 'myFont1';
				src: url('./fonts/font1/方正手迹.ttf') format('truetype');
			}

			/* 兼容性写法 */
			@font-face {
				font-family: 'myFont2';
				font-display: swap;
				src: url('./fonts/font2/webfont.eot'); /* IE9 */
				src: url('./fonts/font2/webfont.eot?#iefix') format('embedded-opentype'),
					/* IE6-IE8 */ url('./fonts/font2/webfont.woff2') format('woff2'),
					url('./fonts/font2/webfont.woff') format('woff'),
					/* chrome、firefox */ url('./fonts/font2/webfont.ttf') format('truetype'),
					/* chrome、firefox、opera、Safari, Android, iOS 4.2+*/ url('./fonts/font2/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
			}

			t1 {
				font-size: 40px;
				font-family: 'myFont1';
			}

			.t2 {
				font-size: 60px;
				font-family: 'myFont2';
			}
		</style>
	</head>
	<body>
		<h1 class="t1">春风得意马蹄疾，一日看尽长安花</h1>
		<hr />
		<h1 class="t2">春风得意马蹄疾，一日看尽长安花</h1>
	</body>
</html>
